<template>
	<view class="main">
		<view class="top">
			<view class="search-wrap uni-flex uni-align-items-c">
				<u-search placeholder="请输入名字" v-model="username" :show-action="false" bg-color="#F6F6F6" :height="80"
					@change="searchChange"></u-search>
			</view>
			<view class="tab-wrap uni-flex uni-align-items-c uni-justify-content-sb">
				<view @click="tabClick(index,item.id)" class="item" :class="{active:current === index}"
					v-for="(item,index) in tabsList" :key="index">
					{{item.name}}
				</view>
			</view>
		</view>
		<view class="list-wrap">
			<template v-if="userFindListData.length>0">
				<view v-for="(item,idx) in userFindListData" :key="idx" class="item uni-flex uni-align-items-c"
					@click="skip(item.status,item.id)">
					<view class="lf">
						<image :src="imgUrl + item.face" mode=""></image>
					</view>
					<view class="rt uni-flex uni-flex-direction-c uni-justify-content-c">
						<view class="uni-flex uni-justify-content-sb">
							<view class="name">
								{{item.username}}
							</view>
							<view class="blue" v-if="item.status==1">
								已认证
							</view>
							<view class="blue" v-if="item.status==0">
								审核中
							</view>
							<view class="red" v-if="item.status==2">
								审核失败
							</view>
						</view>
						<view class="time">
							{{item.createTime}}
						</view>
					</view>
				</view>
				<u-loadmore :status="statu" @loadmore="loadmore" />
			</template>
			<u-empty v-else text="数据为空!" mode="list"></u-empty>
		</view>
	</view>
</template>

<script>
	import config from '@/common/config.js';
	export default {
		data() {
			return {
				imgUrl: '',
				statu: 'loadmore',
				current: 0,
				tabsList: [],
				helpId: '', //帮他人认证ID
				page: 1, //页码
				limit: 10, //限制条数
				role: 1, //角色 1 总包部 2 项目人员 3 劳务人员 4 访客 5 监理
				status: 1, //状态 0 待审核 1 审核通过 2 审核拒绝
				userFindListData: [], //用户列表
				total: null, //总页数
				username: ''
			}
		},
		onLoad() {
			this.helpId = uni.getStorageSync('user').id;
			this.imgUrl = config.imgUrl + '/';
			let bid = uni.getStorageSync('bid');
		},
		onShow() {
			let bid = uni.getStorageSync('bid');
			this.tabsList = [{
				id: 1,
				name: '总包部'
			}, {
				id: 5,
				name: '监理'
			}, {
				id: 2,
				name: '项目人员'
			}, {
				id: 3,
				name: '劳务人员'
			}, {
				id: 4,
				name: '访客'
			}];
			this.page = 1;
			this.username = '';
			this.userFindListData = [];
			this.userFindList(this.helpId, this.page, this.limit, this.role, this.username);
		},
		methods: {
			// 搜索框change事件
			searchChange() {
				// 防抖
				this.$u.debounce(this.doSearch, 500);
			},
			// 搜索
			doSearch() {
				this.page = 1;
				this.userFindListData = [];
				this.userFindList(this.helpId, this.page, this.limit, this.role, this.username);
			},
			skip(status, id) {
				// status:状态 0 待审核 1 审核通过 2 审核拒绝
				switch (status) {
					case 0:
						uni.navigateTo({
							url: './resultIng'
						})
						break;
					case 1:
						uni.navigateTo({
							url: './resultSuccess'
						})
						break;
					case 2:
						uni.navigateTo({
							url: './resultFail?type=others&id=' + id
						})
						break;
				}
			},
			// 分页获取用户
			userFindList(helpId, page, limit, role, username) {
				this.statu = 'loading';
				this.$u.api.userFindList({
					helpId: helpId,
					page: page,
					limit: limit,
					role: role,
					username: username
				}).then(res => {
					if (res.code == 0) {
						this.userFindListData = this.userFindListData.concat(res.data.data);
						this.total = res.data.total;
						this.statu = 'loadmore';
					}
				})
			},
			// tabs切换
			tabClick(index, id) {
				console.log(this.username, 987);
				this.current = index;
				this.role = id;
				this.page = 1;
				this.userFindListData = [];
				this.userFindList(this.helpId, this.page, this.limit, this.role, this.username);
			},
			//加载更多
			loadmore() {
				if (this.page < (this.total / this.limit)) {
					this.statu = 'loading';
					this.userFindList(this.helpId, ++this.page, this.limit, this.role, this.username);
				} else {
					this.statu = 'nomore';
				}
			}
		},
		onReachBottom() {
			if (this.page < (this.total / this.limit)) {
				this.statu = 'loading';
				this.userFindList(this.helpId, ++this.page, this.limit, this.role, this.username);
			} else {
				this.statu = 'nomore';
			}
		}
	}
</script>

<style lang="scss" scoped>
	.main {
		.top {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			z-index: 99;
			background: #fff;

			.search-wrap {
				padding: 0 32rpx;
				height: 100rpx;

				::v-deep .u-search {
					width: 686rpx;
				}
			}

			.tab-wrap {
				width: 750rpx;
				height: 100rpx;
				background: #FFFFFF;
				padding: 0 32rpx;
				border-bottom: solid 2rpx #F6F6F6;

				.item {
					height: 100rpx;
					line-height: 100rpx;
				}

				.item.active {
					border-bottom: solid 4rpx #30A1FF;
					color: #30A1FF;
					font-weight: bold;
				}
			}
		}

		.list-wrap {
			height: calc(100vh - 200rpx);
			margin-top: 200rpx;

			.item {
				height: 138rpx;
				background: #FFFFFF;
				padding: 0 32rpx;

				.lf {
					width: 100rpx;
					height: 100rpx;
					border-radius: 20rpx;
					overflow: hidden;

					image {
						width: 100%;
						height: 100%;
					}
				}

				.rt {
					margin-left: 16rpx;
					width: 570rpx;

					.name {
						font-size: 28rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #333333;
						width: 450rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}

					.blue {
						color: #30A1FF;
					}

					.red {
						color: #FF0000;
					}

					.time {
						font-size: 24rpx;
						font-family: PingFang SC;
						font-weight: 400;
						color: #737373;
						margin-top: 8rpx;
						width: 450rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}
			}

			.item:not(first-child) {
				margin-top: 2rpx;
			}
		}
	}
</style>
